<template>
	<view class="page_wrapper">
		<Navbar title=""></Navbar>
		<view class="pagebox">
			<view class="calc_list_block">
				<view class="calc" v-for="(calc, index) in calcList" :key="index">
					{{calc.topic}}
					<view :style="calc.isCorrect=='0'?'color:red':'color:green'">
						{{calc.userAnswer}}
					</view>
					<view class="resultbox">
						<span>{{calc.myResult}}</span>
						<image v-if="calc.isCorrect!='0'" class="icon" src="../../../static/nimg/true.png" mode=""></image>
						<image v-else class="icon" src="../../../static/nimg/error.png" mode=""></image>
					</view>
					<view class="trueans" v-if="calc.isCorrect=='0'">
						{{calc.answer}}
					</view>
				</view>
			</view>
			<!-- <image class="showimg" src="../../../static/nimg/mathshowbg.png" mode=""></image> -->
		</view>
		
		<view class="listbox">
			<view class="onlyerror">
				<button v-if="!showError" class="errbtn" @click="onlyError()">只看错题</button>
				<button v-else class="errbtn" style="background-color: #074F1E;" @click="showAll()">查看全部</button>
			</view>
			<view class="form_block">
				<view class="form_row">
					<view class="row_title">答题数量：</view>
					<view class="row_val">{{mathExam.calcTotalCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答对数量：</view>
					<view class="row_val">{{mathExam.rightCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答错数量：</view>
					<view class="row_val">{{mathExam.errorCount}}</view>
				</view>
				<view class="form_row">
					<view class="row_title">答题用时：</view>
					<view class="row_val">{{mathExam.useTimeTxt}}秒</view>
				</view>
			</view>
		</view>
		<image src="../../../static/nimg/bg.png" class="page_bg_img" mode=""></image>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	import Navbar from '@/components/navbar.vue'
	export default {
		components:{
			Navbar
		},
		data() {
			return {
				examId: 0,
				mathExam: {},
				calcList: [],
				backList:[], // 备份
				showError:false
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data)
			this.examId = data.id
			this.mathExam.calcTotalCount = data.num
			this.mathExam.useTimeTxt = data.expendTime
			this.mathExam.rightCount = 0
			this.mathExam.errorCount = 0
			this.fetchData()
		},
		methods: {
			fetchData() {
				uni.showLoading()
				request.get("/topicRecordDetail/list",{
					topicRecordId:this.examId,
					page:1,
					limit:60
				}).then(res=>{
					console.log(res);
					uni.hideLoading()
					if(res.code===200){
						this.calcList = res.result.dataList
						this.calcList.forEach(item=>{
							if(item.isCorrect==1){
								this.mathExam.rightCount++
							}else{
								this.mathExam.errorCount++
							}
						})
					}
				})
			},
			
			updateExamResult() {
				uni.navigateTo({
					url: '/pages/mathExamLogs/mathExamLog/uploadExamResult?examId=' + this.examId
				})
			},
			previewImage() {
				uni.previewImage({
					urls: [this.mathExam.resultImg],
					longPressActions :{
						itemList:['保存图片'],
						success(data) {
							let imgurl = this.mathExam.resultImg
							that.saveImage(imgurl)
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				})
			},
			saveImage(imgurl){
				// console.log(imgurl)
				uni.downloadFile({
					url:imgurl,
					success(res){
						// console.log(res)
						let url = res.tempFilePath
						uni.saveImageToPhotosAlbum({
							filePath:url,
							success() {
								uni.showToast({
									title:'保存成功',
									icon:"none"
								})
							},
							fail(err) {
								console.log('保存失败',err)
								uni.showToast({
									title:'保存失败',
									icon:"none"
								})
							}
						})
					}
				})
			},
			showAll(){
				this.showError = false
				this.calcList = this.backList
			},
			onlyError(){
				this.showError = true
				let arr = []
				this.backList = this.calcList
				arr = this.calcList.filter((item)=>{
					return item.isCorrect==0
				})
				this.calcList = arr
				
			},
		}
	}
</script>

<style lang="scss">
.page_wrapper{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.pagebox {
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 4;
		top: 160rpx;
		overflow: hidden;
		height: 50%;
	}
	.icon{
		height: 40rpx;
		width: 40rpx;
		position: absolute;
		top: 5rpx;
		left: -24rpx;
	}
	.calc_list_block {
		flex: 1;
		z-index: 5;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		align-content: flex-start;
		overflow: scroll;
		justify-content: center;
		font-size: 30rpx;
		color: #074F1E;
		row-gap: 34rpx;
		background-color: white;
		column-gap: 20rpx;
		margin: 50rpx 0rpx 120rpx 0rpx;
		padding:20rpx;
		border-radius: 40rpx;
		.calc {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.trueans{
			color: green;
			margin-left: 20rpx;
		}
		.resultbox{
			position: relative;
		}
	}
	.showimg {
		position: absolute;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		height: 100%;
		margin: 0 auto;
		left: 0;
		right: 0;
	}
	.bottom_btns_block{
		.fcz_btn{
			flex: 0.4;
			height: 40px;
			color: white;
			background-color: #67C23A;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 5px;
		}
		.delete_btn{
			background-color: #f56c6c;
			margin-right: 20px;
		}
		.download_btn{
			background-color: #67C23A;
		}
	}
	.listbox{
		position: relative;
		z-index: 4;
		top: 130rpx;
	}
	.onlyerror{
		width: 90%;
		margin: 0 auto;
	}
	.errbtn{
		width: 300rpx;
		height: 98rpx;
		border: none;
		border-radius: 50rpx;
		background-color: #f56c6c;
		color: white;
	}
	.errbtn::after{
		border: none;
	}
	.form_block{
		flex: 1;
		padding: 0px 20px;
		overflow: scroll;
		.form_row{
			min-height: 50px;
			background-color: #C4E6C2;
			color:#074F1E;
			border-radius: 20rpx;
			margin-top: 20rpx;
			padding: 0 20rpx;
			// border-bottom: 1px solid #e2e2e2;
			display: flex;
			font-weight: 600;
			align-items: center;
			.row_title{
				width: 160rpx;
				font-size: 30rpx;
			}
			.row_val{
				.result_img{
					width: 80px;
					height: 120px;
				}
			}
		}
	}
}
</style>
